<template>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group class="select-group name-select-group">
        <div class="inputMask" @click="inputFoucs"></div>
        <p>企业名称</p>
        <el-select
          style="width: 100%"
          class="searchBox"
          v-model="qyObj"
          filterable
          remote
          reserve-keyword
          value-key="id"
          placeholder="请输入关键词"
          @change="nameChange"
          :remote-method="nameEvent"
        >
          <el-option
            v-for="(item, index) in nameList"
            :key="index"
            :label="item.name"
            :value="item"
          >
            <span style="float: left">{{ item.name }}</span>
          </el-option>
        </el-select>
      </van-cell-group>
      <!-- <van-field v-else readonly name="企业名称" :value="form.name" label="企业名称" /> -->
      <van-field
        v-model="form.enterpriseCode"
        name="企业信用代码"
        label="企业信用代码"
        placeholder="企业信用代码"
        disabled
      />
      <van-field
        readonly
        name="园区名称"
        disabled
        :value="form.basicName"
        label="园区名称"
        placeholder="园区名称"
      />
      <van-field label="企业法人" :value="companyInfo.owner" disabled />
      <van-field
        type="textarea"
        autosize
        label="企业注册地址"
        :value="companyInfo.address"
        disabled
      />
      <van-field
        v-model="form.visitName"
        readonly
        name="填报人"
        label="填报人"
        placeholder="填报人"
        required
        :rules="[{ required: true, message: '请填写填报人' }]"
      />
      <van-field
        v-model="locationAdress"
        rows="1"
        autosize
        readonly
        label="填报人定位"
        type="textarea"
        placeholder="无法获取当前位置信息"
        :required="!hasId"
        :rules="
          !hasId
            ? [{ required: true, message: '请打开手机定位！' }]
            : [{ required: false, message: '请打开手机定位！' }]
        "
      />
      <!-- <van-field
        required
        clickable
        name="datetimePicker"
        :value="insertTime"
        placeholder="年/月/日"
        label="填报时间"
        @click="visitDateShowPicker = true"
      />-->
      <van-popup v-model="visitDateShowPicker" position="bottom">
        <van-datetime-picker
          v-model="currentTime"
          type="datetime"
          @confirm="visitDateConfirm"
          @cancel="visitDateShowPicker = false"
        />
      </van-popup>
      <van-field
        v-model="form.sjbgdz"
        name="实际办公地址"
        label="实际办公地址"
        placeholder="实际办公地址"
      />
      <van-cell-group class="select-group">
        <p>实际办公地址与注册地址两址合一</p>
        <van-radio-group v-model="form.lzhy" direction="horizontal">
          <van-radio name="是">是</van-radio>
          <van-radio name="否">否</van-radio>
          <van-radio name="虚拟注册">虚拟注册</van-radio>
        </van-radio-group>
      </van-cell-group>
      <van-field
        v-model="form.dwlxr"
        name="对外联系人"
        label="对外联系人"
        placeholder="对外联系人"
        required
        :rules="[{ required: true, message: '请填写对外联系人' }]"
      />
      <van-field
        v-model="form.qy_phone"
        type="number"
        name="联系方式"
        label="联系方式"
        placeholder="联系方式"
        required
        :rules="[{ required: true, message: '请填写联系方式' }]"
      />
      <!-- <van-field required name="radio" label="实际办公地址与注册地址两址合一" :rules="[{ required: true, message: '请填写联系方式' }]">
        <template #input>
          <van-radio-group v-model="form.lzhy" direction="horizontal">
            <van-radio name="1">一致</van-radio>
            <van-radio name="2">不一致</van-radio>
            <van-radio name="3">虚拟注册</van-radio>
          </van-radio-group>
        </template>
      </van-field>-->
      <van-cell-group class="select-group">
        <p>税是否缴纳在五常</p>
        <van-radio-group v-model="form.sfjszcd" direction="horizontal">
          <van-radio name="是">是</van-radio>
          <van-radio name="否">否</van-radio>
        </van-radio-group>
      </van-cell-group>
      <van-cell-group class="select-group">
        <p>办公场地租赁/购买</p>
        <van-radio-group v-model="form.bgcslx" direction="horizontal">
          <van-radio name="租赁">租赁</van-radio>
          <van-radio name="购买">购买</van-radio>
        </van-radio-group>
      </van-cell-group>
      <van-field
        v-model="form.occupancyArea"
        name="入驻面积"
        label="入驻面积"
        placeholder="入驻面积"
      />
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="form.rzqsrq"
        label="入驻起始时间"
        placeholder="年/月/日"
        @click="startDateShowPicker = true"
      />
      <van-popup v-model="startDateShowPicker" position="bottom">
        <van-datetime-picker
          type="date"
          @confirm="startDateConfirm"
          @cancel="startDateShowPicker = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="form.rzjzrq"
        label="入驻截止时间"
        placeholder="年/月/日"
        @click="endDateShowPicker = true"
      />
      <van-popup v-model="endDateShowPicker" position="bottom">
        <van-datetime-picker
          type="date"
          @confirm="endDateConfirm"
          @cancel="endDateShowPicker = false"
        />
      </van-popup>
      <van-cell-group class="select-group">
        <p>企业情况</p>
        <van-checkbox-group v-model="form.qyqk" direction="horizontal">
          <van-checkbox name="已上市">已上市</van-checkbox>
          <van-checkbox name="规上">规上</van-checkbox>
          <van-checkbox name="雏鹰青蓝">雏鹰青蓝</van-checkbox>
          <van-checkbox name="鲲鹏">鲲鹏</van-checkbox>
          <van-checkbox name="国高">国高</van-checkbox>
        </van-checkbox-group>
      </van-cell-group>
      <van-field
        v-model="form.workersNum"
        name="职工人数"
        label="职工人数"
        placeholder="职工人数"
      />
      <van-field
        v-model="form.dyNum"
        name="党员人数"
        label="党员人数"
        placeholder="党员人数"
      />
      <van-field
        v-model="form.type_A"
        name="A类人数"
        label="A类人才"
        placeholder="A类人才"
      />
      <van-field
        v-model="form.type_B"
        name="B类人数"
        label="B类人才"
        placeholder="B类人才"
      />
      <van-field
        v-model="form.type_C"
        name="C类人数"
        label="C类人才"
        placeholder="C类人才"
      />
      <van-field
        v-model="form.type_D"
        name="D类人数"
        label="D类人才"
        placeholder="D类人才"
      />
      <van-field
        v-model="form.type_E"
        name="E类人数"
        label="E类人才"
        placeholder="E类人才"
      />
      <van-field
        v-model="form.type_F"
        name="F类人数"
        label="F类人才"
        placeholder="F类人才"
      />
      <van-field
        v-model="form.bs"
        name="博士人数"
        label="博士人数"
        placeholder="博士人数"
      />
      <van-field
        v-model="form.ss"
        name="硕士人数"
        label="硕士人数"
        placeholder="硕士人数"
      />
      <van-field
        v-model="form.bk"
        name="本科人数"
        label="本科人数"
        placeholder="本科人数"
      />
      <van-field
        v-model="form.yfNum"
        name="研发人员人数"
        label="研发人员人数"
        placeholder="研发人员人数"
      />
      <van-field
        v-model="form.zycp"
        rows="3"
        autosize
        label="主要产品"
        type="textarea"
        placeholder="请输入主要产品"
      />
      <van-field
        v-model="form.yfcp"
        rows="3"
        autosize
        label="研发产品"
        type="textarea"
        placeholder="请输入研发产品"
      />
      <van-cell-group class="select-group">
        <p>培育计划</p>
        <van-checkbox-group v-model="form.pyjh" direction="horizontal">
          <van-checkbox name="上市">上市</van-checkbox>
          <van-checkbox name="鲲鹏">鲲鹏</van-checkbox>
          <van-checkbox name="雏鹰青蓝">雏鹰青蓝</van-checkbox>
          <van-checkbox name="国高">国高</van-checkbox>
        </van-checkbox-group>
      </van-cell-group>
      <van-field
        v-model="form.remark"
        rows="1"
        autosize
        label="备注"
        type="textarea"
        placeholder="请输入备注"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import * as dd from "dingtalk-jsapi"; // 此方式为整体加载，也可按需进行加载
import { formatDate } from "@/assets/js/common.js";

export default {
  data() {
    return {
      userData: {},
      nameList: [],
      qyObj: {},
      username: "",
      password: "",
      parkNameShowPicker: false,
      companyNameColumns: ["企业1", "企业2", "企业3"],
      companyNameShowPicker: false,
      // 填报时间
      visitDateShowPicker: false,
      //   入驻起始时间
      startDateShowPicker: false,
      //   入驻截止时间
      endDateShowPicker: false,
      //   选择园区企业后从后台获取的企业注册信息
      companyInfo: {
        owner: "企业法人",
        qy_phone: "请先选择园区与企业",
        address: "企业注册地址",
      },
      form: {
        basicName: "",
        enterpriseCode: "",
        qy_phone: "",
        lzhy: "是",
        sjbgdz: "",
        visitName: "",
        dwlxr: "", //对外联系人
        sfjszcd: "是",
        bgcslx: "租赁",
        occupancyArea: "",
        rzqsrq: "",
        rzjzrq: "",
        qyqk: [],
        workersNum: "",
        dyNum: "",
        yfNum: "",
        ss: "",
        bk: "",
        bs: "",
        type_A: "",
        type_B: "",
        type_C: "",
        type_D: "",
        type_E: "",
        type_F: "",
        zycp: "",
        yfcp: "",
        pyjh: [],
        remark: "",
      },
      // 填报人定位
      locationAdress: "",
      // 经度
      lon: "",
      // 纬度
      lat: "",
      currentTime: new Date(),
      gpsNotice: 0,
      // 随机一个定位场景id
      sceneId: "",
    };
  },
  created() {
    this.userData = JSON.parse(sessionStorage.getItem("userData"));
    if (this.$route.params.id) {
      this.$api
        .record({ method: "post", type: "get" }, { id: this.$route.params.id })
        .then((res) => {
          if (res.data.data.pyjh != "") {
            res.data.data.pyjh = res.data.data.pyjh.split(",");
          }else{
            res.data.data.pyjh = []
          }
          if (res.data.data.qyqk != '') {
            res.data.data.qyqk = res.data.data.qyqk.split(",");
          }else{
            res.data.data.qyqk = []
          }
          this.form = res.data.data;
          this.qyObj = res.data.data.name;
        });
        return this.$api
          .enterprise(
            { method: "post", type: "datagrid" },
            { name: this.$route.query.name, pageSize: 8, pageNo: 1 }
          )
          .then((res) => {
            this.companyInfo.owner = res.data.data[0].contacts||'';
            this.companyInfo.address = res.data.data[0].register&&res.data.data[0].register.physicalAddress||'';
          });
    }
    this.form.visitName = this.userData.name;
    // 随机一个定位场景id
    this.sceneId = Math.random();
    // 获取定位
    this.geoStart(this.sceneId);
  },
  mounted(){
      document.querySelector(".el-input__inner").removeAttribute("readonly")
  },
  methods: {
    // 开启定位
    geoStart(sceneId) {
      var self = this;
      dd.ready(function () {
        // 获取钉钉位置坐标
        dd.device.geolocation.start({
          targetAccuracy: 100, // 期望精确度
          iOSDistanceFilter: 100, // 变更感知精度(iOS端参数)
          useCache: false, // 是否使用缓存(Android端参数)
          withReGeocode: true, // 是否返回逆地理信息,默认否
          callBackInterval: 2000, //回传时间间隔，ms
          sceneId, // 定位场景id,
          onSuccess: function (res) {
            if (res.resultCode == 0) {
              self.locationAdress = res.address;
              self.lon = res.longitude;
              self.lat = res.latitude;
            } else {
              if (!self.gpsNotice) {
                self.$toast.fail("请打开手机定位！");
                self.gpsNotice++;
              }
            }
          },
          onFail: function (err) {
            alert("dd geolocationstarterr: " + JSON.stringify(err));
          },
        });
      });
    },
    // 关闭定位
    geoStop(sceneId) {
      var self = this;
      dd.ready(function () {
        dd.device.geolocation.stop({
          sceneId, // 需要停止定位场景id
          onSuccess: function (result) {
            // alert("dd result: " + JSON.stringify(result));
          },
          onFail: function (err) {
            alert("dd error: " + JSON.stringify(err));
          },
        });
      });
    },
    nameEvent(query) {
      //关键字搜索
      console.log("query", query);
      if (query && query.length > 0) {
        this.$api
          .enterprise(
            { method: "post", type: "datagrid" },
            { name: query, pageSize: 8, pageNo: 1 }
          )
          .then((res) => {
            this.nameList = res.data.data;
          });
      } else {
        this.nameList = [];
      }
    },
    nameChange() {
      //确定
      console.log("this.qyObj", this.qyObj);
      this.form.name = this.qyObj.name;
      this.form.enterpriseCode = this.qyObj.code;
      this.form.basicName = this.qyObj.basicName;
      this.companyInfo.owner = this.qyObj.contacts;
      this.companyInfo.address =
        this.qyObj.register && this.qyObj.register.registeredAddress;
      //nameEvent()
      if (!this.$route.params.id) {
        this.$api
          .record(
            { method: "post", type: "datagrid" },
            { enterpriseId: this.qyObj.id }
          )
          .then((res) => {
            var obj = res.data.data[0];
            delete obj.enterprise;
            delete obj.id;
            // for(var i in obj){
            // 	if(ignore.indexOf(i)<0){
            // 		this.form=obj
            // 	}
            // }
            this.form = obj;
            if (this.form.pyjh) {
              this.form.pyjh = this.form.pyjh.split(",");
            }else{
              this.form.pyjh = []
            }
            if (this.form.qyqk) {
              this.form.qyqk = this.form.qyqk.split(",");
            }else{
              this.form.qyqk = []
            }
            this.form.name = this.qyObj.name;
            this.form.enterpriseCode = this.qyObj.code;
            this.form.basicName = this.qyObj.basicName;

            console.log("form", this.form);
          });
      }
    },
    onSubmit() {
      var self = this;
      delete this.form.classType;
      delete this.form.enterprise;

      console.log("submit", this.form);
      this.form.locationAdress = this.locationAdress;
      this.form.lon = this.lon;
      this.form.lat = this.lat;
      if (this.form.pyjh) {
        this.form.pyjh = this.form.pyjh.join(",");
      }
      if (this.form.qyqk) {
        this.form.qyqk = this.form.qyqk.join(",");
      }
      if (this.$route.params.id) {
        this.form.visitName = JSON.parse(
          sessionStorage.getItem("userData")
        ).name;
      }
      this.$api
        .record({ method: "post", type: "save" }, this.form)
        .then((res) => {
          if (res.data.isSuccess) {
            this.$toast.success("提交成功");
            if (!this.$route.params.id) return (this.form = {});
            if (this.form.pyjh) {
              this.form.pyjh = this.form.pyjh.split(",");
            }
            if (this.form.qyqk) {
              this.form.qyqk = this.form.qyqk.split(",");
            }
          }
        });
    },
    // 园区名称确认
    parkNameConfirm(value) {
      this.form.basicName = value;
      this.parkNameShowPicker = false;
    },
    // 入驻起始时间
    visitDateConfirm(value) {
      this.form.insertTime = formatDate("YYYY/MM/DD hh:mm:ss", value);
      this.visitDateShowPicker = false;
    },
    // 入驻起始时间
    startDateConfirm(value) {
      this.form.rzqsrq = formatDate("YYYY/MM/DD", value);
      this.startDateShowPicker = false;
    },
    // 入驻截止时间
    endDateConfirm(value) {
      this.form.rzjzrq = formatDate("YYYY/MM/DD", value);
      this.endDateShowPicker = false;
    },
    inputFoucs(){
      document.querySelector(".el-input__inner").removeAttribute("readonly")
      document.querySelector(".el-input__inner").focus()
    }
  },
  beforeDestroy() {
    this.gpsNotice++;
    this.geoStop(this.sceneId);
  },
  computed: {
    hasId() {
      return this.$route.params.id;
    },
  },
};
</script>

<style scoped lang="less">
.select-group {
  background: #fff;
  padding: 10px 16px;
  font-size: 14px;
  color: #646566;
}
.select-group p {
  margin: 5px 0 8px;
}
.van-checkbox--horizontal {
  margin-bottom: 10px;
}
.name-select-group {
  display: flex;
  justify-content: space-between;
}
.name-select-group p {
  width: 110px;
  line-height: 24px;
  margin: 0;
}
.name-select-group /deep/ .el-input__inner {
  height: 24px;
  border: none;
  outline: none;
}
.inputMask{
  position: absolute;
  width: 75%;
  left: 20%;
  height: 30px;
  z-index: 999999999;
}
input {
    font-size: 1.6rem;
    height: 1.6rem;
    padding: 1rem 0;
}
.searchBox /deep/ .el-input__inner,
.searchBox /deep/ .el-input__icon{
  line-height: 24px !important;
}
</style>
